//行业视频 新增-编辑弹窗
import React, { Component } from 'react'
import { Button,Form, Input, Modal, Select,Upload ,Icon ,message ,Spin} from 'antd'
import { connect } from 'react-redux'
import {addMaster} from 'actions/userConter'
const FormItem = Form.Item
import reqwest from 'reqwest';
import {
    addVideoinfo,editVideoinfo
} from 'actions/industry'
@Form.create({
    mapPropsToFields(props) {
        return {
          title: Form.createFormField({
            ...props.content,
            value: props.content.title,
          }),
          detail: Form.createFormField({
            ...props.content,
            value: props.content.detail,
          }),
    
        };
    } 
})
@connect(
    (state, props) => ({
      config: state.config,
    })
)
export default class ModalAddIndustryVideo extends Component {
    constructor (props) {
      super(props)
      this.state = {
        addVideoUrl:"",
        loading:false,
        fileList:[],
        sendFlg:true,//多次提交
      }
    }
    /*
      执行一次，在初始化render之前执行，如果在这个方法内调用setState，render()知道state发生变化，并且只执行一次
    */
    componentWillMount(){
        if(this.props.type == 1){
            return;
        }
        this.setState({
            fileList:[{
                uid: -1,
                name: this.props.content.title,
                status: 'done',
            }],
        })
        
    }

    addSubmit(callback,e){//新增确定按钮
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if(!err){
                const { fileList } = this.state;
                if(!this.state.sendFlg){
                    return
                }else{
                    this.setState({sendFlg:false});
                }
                if(fileList.length==0){
                    message.error('请上传视频');
                    this.setState({sendFlg:true});
                    return;
                }
                this.setState({loading: true});
                if(this.props.type == 1){
                    const formData = new FormData();
                        fileList.forEach((file) => {
                        formData.append('vodFile', file);
                        formData.append('title', values.title);
                        formData.append('detail', values.detail);
                    });
                    const datajson = {
                        "title":values.title,//视频标题
                        "vodAddr":this.state.addVideoUrl,//视频地址
                        "detail":values.detail,//视频说明
                    }
                    //新增
                    reqwest({
                        url: global.$GLOBALCONFIG.$ctx+'content/industry/video/add',
                        method: 'post',
                        processData: false,
                        data: formData,
                        headers: {
                        'Authorization':'holder ' + sessionStorage.getItem('token')
                        },
                        success: (respose) => {
                            this.setState({
                                fileList: [],
                                loading: false,
                            });
                            callback&&callback()
                            message.success(respose.respMsg);
                            this.props.ModalCancel();
                            setTimeout(()=>{this.setState({ sendFlg:true,})},1000)
                        },
                        error: (respose) => {
                          this.setState({
                            loading: false,
                          });
                          message.success(respose.respMsg);
                        },
                      });
                }else{
                    //编辑
                    if(fileList[0].type){
                        var formData = new FormData();
                            fileList.forEach((file) => {
                            formData.append('vodFile', file);
                            formData.append('id', this.props.content.id);
                            formData.append('title', values.title);
                            formData.append('detail', values.detail);
                        });
                    }
                    else{
                        var formData = new FormData();
                            fileList.forEach((file) => {
                            formData.append('id', this.props.content.id);
                            formData.append('title', values.title);
                            formData.append('detail', values.detail);
                        });
                    }                             
                    const datajson = {
                        "title":values.title,//视频标题
                        "vodAddr":this.state.addVideoUrl,//视频地址
                        "detail":values.detail,//视频说明
                    }
                    reqwest({
                        url: global.$GLOBALCONFIG.$ctx+'content/industry/video/update',
                        method: 'post',
                        processData: false,
                        data: formData,
                        headers: {
                        'Authorization':'holder ' + sessionStorage.getItem('token')
                        },
                        success: (respose) => {
                          this.setState({
                            fileList: [],
                            loading: false,
                          });
                            callback&&callback()
                            message.success(respose.respMsg);
                            this.props.ModalCancel();
                            setTimeout(()=>{this.setState({ sendFlg:true,})},1000)
                        },
                        error: (respose) => {
                          this.setState({
                            loading: false,
                          });
                          message.success(respose.respMsg);
                        },
                    });
                }                          
            }
        });
    }
    render () {
        const {form } = this.props
        const { getFieldDecorator } = form;
        const formItemLayout = {
            labelCol: {
              xs: { span: 24 },
              sm: { span: 4 },
            },
            wrapperCol: {
              xs: { span: 24 },
              sm: { span: 16 },
            },
        };
        const uploadImg = {
            name: 'videoFile',
            action: global.$GLOBALCONFIG.$ctx+'image/video/upload',
            headers: {
              authorization: 'holder ' + sessionStorage.getItem('token'),
            },
            data:{
                type:"1"
            },
            accept:"video/mp4",
            beforeUpload: (file)=>{
              const isImg = file.type.substring(0,5) === 'video';
              if (!isImg) {
                message.error('请选择视频');
              }
              this.setState(({ fileList }) => ({
                fileList: [file],
              }));
              console.log(this.state)
              return false;
            },
            onRemove: (file) => {
                this.setState(({ fileList }) => {
                  const index = fileList.indexOf(file);
                  const newFileList = fileList.slice();
                  newFileList.splice(index, 1);
                  return {
                    fileList: newFileList,
                  };
                });
              },
            fileList: this.state.fileList,
            showUploadList:true,//不展示上传完成之后的文件列表
        }
        return (
            //添加视频        
            <Modal
                maskClosable={false}
                visible={this.props.ModalFlg}
                title={this.props.type == '1' ? "新增视频" : "编辑视频" }
                onCancel={this.props.ModalCancel}
                footer={
                    !this.state.loading ?
                    [<Button key="submit" type="primary"  onClick={this.addSubmit.bind(this,this.props.callback)}>提交</Button>]
                    :[<Button key="uploading">上传中</Button>]
                }
            >
                <Form>
                    <FormItem label="视频名称" {...formItemLayout}> 
                    {
                        getFieldDecorator('title', {
                            rules: [{
                                required: true,message:"此项必填"
                            }],
                        })(
                            <Input placeholder="请输入关键字" size="default" style={{ width: '200px' }} />
                        )
                        }                                                                
                    </FormItem>
                    <FormItem label="视频上传" {...formItemLayout}>
                        <Spin spinning={this.state.loading} style={{width:"80px"}}>                                           
                        <Upload {...uploadImg}>                
                            <Button>{this.state.fileList.length==0?'点击上传视频':'上传更换视频'}</Button>
                        </Upload>   
                        </Spin>    
                    </FormItem>
                    <FormItem label="视频说明" {...formItemLayout}>
                        {
                        getFieldDecorator('detail', {
                            rules: [{
                                required: true,message:"此项必填"
                            }],
                        })(
                            <Input placeholder="请输入关键字" size="default" style={{ width: '200px' }} />
                        )
                        }      
                    </FormItem>         
                </Form>
            </Modal>
            
        )
    }
}